<template>
  <div style="font-weight: bold; font-size: large; margin-bottom: 20px">
    FAQ问题列表
  </div>

  <div class="questionsearch"
       style="width:38.2%;float:left">
    <a-input-search v-model:value="desc_search"
                    placeholder="请搜索问题名称:"
                    enter-button
                    @search="getPage" />
  </div>
  <a-button type="primary"
            class="add"
            style="float:right;"
            @click="addFaq">
    创建FAQ
  </a-button>
  <br />
  <a-table :dataSource="page.list"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange">
    <!-- 插入名为action的插槽 -->
    <template #action="{ record }">
      <span v-if="record.status=='未发布'">
        <a @click="openUpdate(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="pubFirst(record)">发布</a>
        <a-divider type="vertical" />
        <a @click="delFirst(record)">删除</a>
        <a-divider type="vertical" />
      </span>
      <span v-if="record.status=='已发布'">
        <a @click="pubFirst(record)">下架</a>
        <a-divider type="vertical" />
      </span>
    </template>
  </a-table>
  <!-- 编辑 -->
  <a-modal v-model:visible="visible"
           title="创建FAQ/编辑FAQ"
           @ok="updateFaq"
           @cancel="exitUpd">
    <div style="width:38.2%">问题描述</div>
    <a-textarea v-model:value="updateInfo.ques_desc"
                :rows="6" />
    <div>答案</div>
    <a-textarea v-model:value="updateInfo.answer"
                :rows="6" />
  </a-modal>
  <!-- 创建 -->
  <a-modal v-model:visible="visible1"
           title="创建FAQ/编辑FAQ"
           @ok="add"
           @cancel="exitAdd">
    <div style="width:38.2%">问题描述</div>
    <a-textarea v-model:value="addInfo.ques_desc"
                :rows="6" />
    <div>答案</div>
    <a-textarea v-model:value="addInfo.answer"
                :rows="6" />
  </a-modal>
  <!-- 删除 -->
  <a-modal title="删除警告"
           :visible="delVisible"
           :confirm-loading="confirmLoading"
           @ok="delSecond"
           @cancel="handleCancel">
    <p>请谨慎删除</p>
  </a-modal>
  <!-- 发布 -->
  <a-modal title="发布/下架警告"
           :visible="pubVisible"
           :confirm-loading="confirmLoading"
           @ok="pubSecond"
           @cancel="pubCancel">
    <p>请谨慎发布/下架</p>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { get, del, post, getBlob, tip, removeLocalToken } from '@/common'
const adm_id = 2196113948
const published = false
const unpublished = true
const columns = [
  {
    dataIndex: 'ques_id', //定义传过来的属性名（服务端的属性名）
    title: '问题ID', //表头项名称
  },
  {
    title: '问题描述',
    dataIndex: 'ques_desc',
  },
  {
    title: '问题回答',
    dataIndex: 'answer',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    //slots自定义插槽，即开发者自定义的内容嵌入
    slots: {
      customRender: 'action', //定义插槽名称，即以action为名的数据插入该列位置
    },
  },
]
//修改信息
const visible = ref(false)
const updateInfo = reactive({
  ques_id: '',
  ques_desc: '',
  answer: '',
})
const openUpdate = (upd) => {
  updateInfo.ques_id = upd.ques_id
  updateInfo.ques_desc = upd.ques_desc
  updateInfo.answer = upd.answer
  visible.value = true
}
const updateFaq = () => {
  post('/ops/faq/updateFaq', updateInfo).then((res) => {
    tip.success('编辑FAQ成功')
    getPage(page.value.current)
    visible.value=false
  })
}
//创建
const addInfo = reactive({
  ques_id: new Date().getTime(),
  ques_desc: '',
  answer: '',
  adm_id: adm_id,
  status: '未发布',
})
const visible1 = ref(false)
const addFaq = () => {
  visible1.value = true
}
const add = () => {
  console.log(addInfo.ques_id)
  if (addInfo.ques_desc == '' && addInfo.answer == '') {
    tip.error('请输入信息再提交！！')
  } else {
    post('/ops/faq/addFaq', addInfo).then((res) => {
      tip.success('创建FAQ成功')
      ;(addInfo.ques_desc = ''),
        (addInfo.answer = ''),
        (addInfo.ques_id = new Date().getTime())
      getPage(page.value.current)
      visible1.value=false
    })
  }
}
const exitAdd = () => {
  ;(addInfo.ques_desc = ''), (addInfo.answer = '')
}
//删除
const delInfo = {
  ques_id: '',
}
const delVisible = ref(false)
const delFirst = (del) => {
  ;(delInfo.ques_id = del.ques_id), (delVisible.value = true)
}
const delSecond = () => {
  post('/ops/faq/delFaq', delInfo).then((res) => {
    tip.success('删除FAQ成功')
    getPage(page.value.current)
  })
  delVisible.value = false
}
const handleCancel = () => {
  delVisible.value = false
}
//发布or下架
const pubInfo = reactive({
  ques_id: '',
  status: '',
})
const pubVisible = ref(false)
const pubFirst = (pub) => {
  ;(pubInfo.ques_id = pub.ques_id),
    (pubInfo.status = pub.status),
    (pubVisible.value = true)
}
const pubSecond = () => {
  post('/ops/faq/pubFaq', pubInfo).then((res) => {
    tip.success(res.message)
    getPage(page.value.current)
  })
  pubVisible.value = false
}
const pubCancel = () => {
  pubVisible.value = false
}

//分页处理-start
const query = reactive({
  ques_desc: '',
}) //定义查询参数
const desc_search = ref('')
query.ques_desc = desc_search
const page = ref({}) //接收服务端返回的分页对象
//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ['2', '3', '5', '10', '20', '30', '100'], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      '共' +
      total +
      '条记录,当前第' +
      pagination.current +
      '页' +
      (range[1] - range[0] + 1) +
      '条记录'
    )
  },
})
//获取当前分页
const getPage = (pageNum = 1) => {
  pageNum = 1
  query.pageNum = pageNum
  query.pageSize = pagination.pageSize
  post('/ops/faq/showAll', query).then((res) => {
    page.value = res.data //将服务端传来的分页数据赋值予page
    //更新分页引擎
    pagination.current = page.value.current
    pagination.pageSize = page.value.pageSize
    pagination.total = page.value.total
  })
}
getPage(1) //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current
  pagination.pageSize = pagi.pageSize
  pagination.total = pagi.total
  getPage(pagination.current)
}

//分页处理-end
</script>

<style>
</style>